<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name = "viewport" content = "width = 1280">
<link rel="stylesheet" href="../../style.css" media="screen" />
<link rel="stylesheet" href="../../css/home.css" media="screen" />
<title>Home</title>
<script type="text/javascript" src="../../scripts/jquery.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery.ui.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../../scripts/cufon/cufon-yui.js"></script>
<script type="text/javascript" src="../../scripts/cufon/PSL_Kittithada_Pro___700.font.js"></script>
<script type="text/javascript" src="../../scripts/common.js"></script>
<script type="text/javascript">
Cufon.replace('.menu-sub-nav-t');
Cufon.replace('.menu-sub-nav');
$(function(){
	$('.left').hover(function(){
		$(this).find('.left-nav').stop().animate({'top':'-170px'}, {duration: 400,easing: 'easeInOutBack'});
	},function(){
		$(this).find('.left-nav').stop().animate({'top':'0px'}, {duration: 300});
	});

	$('.right li').hover(function(){
		$(this).find('.menu-sub-nav').stop().animate({'top':'-74px'}, {duration: 300,easing: 'easeInOutBack'});
		$(this).find('.menu-sub-nav-t').stop().animate({'top':'-100px'}, {duration: 300,easing: 'easeInOutBack'});
	},function(){
		$(this).find('.menu-sub-nav').stop().animate({'top':'0px'}, {duration: 300});
		$(this).find('.menu-sub-nav-t').stop().animate({'top':'-170px'}, {duration: 300});
	});
	
	$('.vdo').bind('click',function(){
		var vdo = $(this).find('.vdo-view');
		var w = vdo.attr('width');
		
		if(vdo.attr('class') == 'vdo-view vactive'){
			vdo.removeClass('vactive');
			$(this).parent().css({'overflow':'hidden'});
			
			return false;
		}
		
		$(this).next().hide();
		$(this).next().next().hide();
		$(this).parent().css({'overflow':'inherit','width':w});
 		vdo.fadeIn(200).addClass('vactive').stepblur();
		return false;
	});
});

/*$.fn.play = function(){
	var obj = $(this);
	var i	= 1;
	var p = obj.attr('alt');
	var ii = setInterval(function ()
	{
		i= i+1;
		if(i>=30){
			i =1;
		}
		obj.attr({'src':'/vdo/'+p+'/'+i+'.png'});
	}, 100);
	$('.vdo').bind('click',function(){
		clearInterval(ii);
		return false;	
	});
}*/

$.fn.stepblur = function(){
	$('#overlay').fadeIn(300);
	var obj = $(this);
	var w 	= parseInt(obj.css('width')) ?  parseInt(obj.css('width')) : 0;
	var i	= 1;
	var _w 	= 0;
	 var tn 	= setInterval(function (){
		i= i+1;
		if(obj.attr('id') == 'f10'){
			if(i>=10){ _w = 0;i= 1;}
		} 
			
		 if(i>=29){ _w = 0;i= 1;}
		_w = _w + w;
		obj.css( {'backgroundPosition': '-'+_w+'px 0px'} );
	},100);
	 
 	obj.bind('click',function(){
		closeblur();
		return false;
	});
	$('#overlay').bind('click',function(){
		closeblur();
		return false;
	});
	
	function closeblur(){
		clearInterval(tn);
		$('#overlay').fadeOut(300);
		obj.fadeOut(100);
		obj.css( {'backgroundPosition': '0px 0px'});
		obj.removeClass('vactive');
		obj.parent().parent().css({'overflow':'hidden'});
		obj.parent().next().show();
		obj.parent().next().next().show();
	}
}
</script>
<style type="text/css">
html, body {
}
.vdo {
	cursor:pointer;
	background:#000;
}
.vdo img {
}
.right li .r {
	right:0;
}
.right li .b {
	bottom:0;
}
.right li .rb {
	right:0;
	bottom:0;
}
</style>
</head>
<body id="home">
<!--$header_html-->
<div id="wrap-container">
  <div class="content">
    <div id="overlay" style=" display:none;background:url(../../images/bg/bg_transparent_b.png) repeat 0 0; width:1270px; height:455px; position:absolute; z-index:9;"> </div>
    <div class="left"> <img src="../../images/img-home/img-home-1.jpg" />
      <div class="left-nav">
        <p class="shoe-cafe">Shoe Cafe</p>
        <p class="find-us">Find Us</p>
        <a href="#" class="fb">Facebook</a> <a href="#" class="tw">Twitter</a> </div>
    </div>
    <div class="right">
      <ul>
        <li class="row1">
         <div class="vdo">
            <div class="vdo-view" style="background:url(/vdo/01.jpg) no-repeat 0 0; background-size: 15500px 300px; display:none; width:533px; height:300px; position:absolute; z-index:10;"></div>
           <img src="../../images/img-home/img-home-2.jpg" width="314" /> </div>
          <div class="menu-sub-nav">
            <p><a href="/location-shop/">Location Shop</a></p>
          </div>
        </li>
        <li class="row1">
          <div class="vdo">
            <div class="vdo-view" style="background:url(/vdo/02.jpg) no-repeat 0 0; background-size: 15500px 300px; display:none; width:533px; height:299px; position:absolute; z-index:10; right:0;"></div>
            <img src="../../images/img-home/img-home-3.jpg" width="352" alt="002" /></div>
          <div class="menu-sub-nav">
            <p><a href="/shopping/">Shopping</a></p>
          </div>
        </li>
        <li class="row1">
          <div class="vdo r">
            <div class="vdo-view" style="background:url(/vdo/03.jpg) no-repeat 0 0; background-size: 11369px 300px; display:none; width:407px; height:300px; position:absolute; z-index:10; right:0;"></div>
            <img src="../../images/img-home/img-home-4.jpg" width="291" alt="003"  /> </div>
          <div class="menu-sub-nav">
            <p><a href="/contact-us/">Countact us</a></p>
          </div>
        </li>
        <li class="row2">
          <div class="vdo b">
             <div class="vdo-view" style="background:url(/vdo/04.jpg) no-repeat 0 0; background-size: 15500px 300px; display:none; width:533px; height:300px; position:absolute; z-index:10; right:0; bottom:0;"></div>
            <img src="../../images/img-home/img-home-5.jpg" width="386" alt="004"  /></div>
          <div class="menu-sub-nav">
            <p><a href="/activity/">Activity</a></p>
          </div>
        </li>
        <li class="row2">
        
          <div class="vdo b"> <div class="vdo-view" style="background:url(/vdo/05.jpg) no-repeat 0 0; background-size: 15500px 300px; display:none; width:533px; height:300px; position:absolute; z-index:10; right:0; bottom:0;"></div> <img src="../../images/img-home/img-home-6.jpg" width="243" alt="005"  /></div>
          <div class="menu-sub-nav">
            <p><a href="/category/">Category</a></p>
          </div>
        </li>
        <li class="row2">
          <div class="vdo rb">
          <div id="f10" class="vdo-view"  style="background:url(/vdo/06.jpg) no-repeat 0 0; background-size: 3608px 187px; display:none; width:328px; height:187px; position:absolute; z-index:10; right:0; bottom:0;"></div>
           <img src="../../images/img-home/img-home-7.jpg" width="328"  alt="001"   /></div>
          <div class="menu-sub-nav">
            <p><a href="/news/">News</a></p>
          </div>
          <div class="menu-sub-nav-t">
            <p><a href="/webboard/">Webboard</a></p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
<!--$footer_html-->
</body>
</html>